<template>
    <div class="chart-container">
        <div 
            :id="'chart' + index" 
            v-for="(_, index) in chartOptions" 
            :key="index"
            class="chart-item"
        ></div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import axios from 'axios'

const chartOptions = ref([])

function renderCharts() {
    chartOptions.value.forEach((option, index) => {
        const chart = echarts.init(document.getElementById('chart' + index), 'white', { 
            renderer: 'canvas' 
        })
        chart.setOption(JSON.parse(option))
    })
}

onMounted(() => {
    axios.get('/api/plot')
        .then(response => {
            chartOptions.value = response.data
            nextTick(() => {
                renderCharts()
            })
        })
        .catch(error => {
            console.log(error)
        })
})
</script>

<style scoped>
.chart-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.chart-item {
    width: 600px;
    height: 400px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
}
</style>